// page.tsx
"use client";

import React, { useEffect, useState } from "react";
import dayjs from "dayjs";
import axios from "axios";
export default function Page() {
  interface DataItem {
    name: string;
    status: string;
    startup: string;
    time: string;
    bz: string;
  }

  const [Datavalue, seDatavalue] = useState<DataItem[]>([]);


  const [currentDate, setCurrentDate] = useState(
    dayjs().format("YYYY-MM-DD HH:mm:ss")
  );

  //100秒获取api数据
  useEffect(() => {
    // 设置定时器每秒更新一次日期10秒
    const intervalId = setInterval(() => {
      axios
        .get("/api/")
        .then((res) => {
          seDatavalue(res.data);
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    }, 100000);

    // 清除定时器
    return () => clearInterval(intervalId);
  }, []);
  useEffect(() => {
    // 设置定时器每秒更新一次日期
    const intervalId = setInterval(() => {
      setCurrentDate(dayjs().format("YYYY-MM-DD HH:mm:ss"));
    }, 1000);

    // 清除定时器
    return () => clearInterval(intervalId);
  }, []);

  return (
    <div className="p-4">
      <div className="text-center mb-4">
        <h1 className="text-2xl font-bold">linwenyuan俱乐部机位图</h1>
      </div>

      <div>
        <h1 className="text-center">
          绿色：正常， 黄色：掉线，红色：第五城初始化，100秒更新数据
        </h1>
        <p>
          当前日期和时间: {currentDate} 
        </p>
        {/* //获取当前时间 */}
      </div>
      <div className="grid grid-cols-6 gap-6">
        {/*  渲染出来的数据进行数组处理 */}
        {Datavalue.map((data: DataItem, index) => {
          const currentTime = dayjs();
          // 用dayjs 格式化数据
          const timeFromData:dayjs.Dayjs = dayjs(data.time);
          // 当前时间减去渲染出来的数据 进行分钟比较 大于5分钟
          const isWithin5Minutes =
            currentTime.diff(timeFromData, "minute") >= 5;

          // const isTimeInPast = timeFromData.isBefore(currentTime);
          //设置背景颜色
          let bgColor;
          //判断  如果提交数据 大于5分钟  就黄色  否则  在判断  如果状态是容器正常运行 背景是绿色 。否则是红色
          if (isWithin5Minutes) {
            bgColor = "bg-yellow-600";
          } else {
            if (data.status === "容器运行正常") {
              bgColor = "bg-green-600";
            } else {
              bgColor = "bg-red-600";
            }
          }

          // 格式化日期
          const formattedTime = timeFromData.format("YYYY-MM-DD HH:mm");
          // const formattedStartup = dayjs(data.startup).format(
          //   "YYYY-MM-DD HH:mm"
          // );

          return (
            <div
              key={index}
              className={`p-4 border rounded shadow-md text-white ${bgColor}`}
            >
              <div className="text-center">
                <div className="font-semibold">名字：{data.name}</div>
                <div className="mt-2">运行状态：{data.status}</div>
                <div className="mt-2">开机时间：{data.startup}</div>
                <div className="mt-2">提交时间：{formattedTime}</div>
                <div className="mt-2">备注信息：{data.bz}</div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
